
<!DOCTYPE html>
<html>
  <head>
    <link href="../stylesheets/bootstrap.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("[name=username]").keyup(function(){
                checking=$(this).val();
                $.ajax({
                    url:"account/check_username",
                    type:"POST",
                    data:{username:checking}      
                }).done(function(msg){
                    if(msg==":)"){
                        $("[name=username]").removeClass("error");
                    }else if(msg==":("){
                        $("[name=username]").addClass("error");
                    }
                });
            });
       });
    </script>
    <meta charset="utf-8">
    <title>Sign Up Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--> 
 
 <!--actual stuff begins here -->
  </head>
  <body>
{{navbar}}

    <div class="span9">
        <div class="hero-unit">
            <h1>Sign Up</h1>
            <p> Hi {{userNick | escape}}.
            You're new here, aren't you? </p>
            <form action="/account/signup" method="post">
                <fieldset>
                    <legend> Please enter your information below: </legend>
                    <p><label>First Name: <input type="text" name="fName" required></label></p>
                    <p><label>Middle Name: <input type="text" name="mName"></label></p>
                    <p><label>Last Name: <input type="text" name="lName" required></label></p>
                    <p><label>Username: <input type="text" name="username" required></label></p>
                </fieldset>
                    <p><input type="submit" value="Sign up!"></p>
            </form>
        </div>
    </div>
  </body>
</html>
